<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../EaselJS/lib/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1050" height="420"></canvas>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.getElementById("myCanvas");
        var stage = new createjs.Stage(canvas);

        var spritesheet = new createjs.SpriteSheet({
            "images": ['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
            "frames": {"height": 96, "count": 10, "width": 75},
            "animations": { run: [0,9]}
        });
        function go(x) {
            character = new createjs.Sprite(spritesheet);
            character.framerate = 30;
            character.x = x;
            character.y = 100; //小人所在的Y轴位置
            character.play();
            stage.addChild(character);
            createjs.Ticker.addEventListener("tick", tick);
        }
        for (var i = 0; i < 10; i++) {
            go(i*10);
        }
        function tick(event) {
            stage.update();
        }
    }
</script>
</body>
</html>